<template>
<div style="padding: 10px">
<el-card>
  <div style="display: flex">
    <div style="width: 300px">
      <el-image :src="book.url" :preview-src-list="[book.url]" style="width: 100%"></el-image>
    </div>
    <div style="flex: 1;padding-left: 50px">
      <div class="item1"><h3>书名: {{book.name}}</h3></div>
      <div class="item1" style="font-size: 14px;margin-top: 20px">详情: {{book.description}}</div>
      <div class="item1" style="margin-top: 30px">
        <h4>评分: </h4>
        <el-rate
            v-model="book.score"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
        </el-rate>
      </div>
      <div class="item1" style="margin-top: 30px"><h3>库存: {{book.num}}</h3></div>
      <div class="item1" style="margin-top: 80px">
        <el-button size="medium" style="background-color: red;color: white" @click="cart"><i class="el-icon-shopping-cart-2"></i>申请借阅</el-button>
      </div>
    </div>
  </div>
</el-card>
  <div style="margin: 30px 0">
<!--    <div style="margin: 10px 0;text-align: center;color: #3F5EFB">-->
<!--      <h3 v-if="">评论区</h3>-->
<!--    </div>-->

<!--    <div style="margin: 10px 0">-->
<!--      <div style="border-bottom: 1px solid orangered; padding: 10px 0; font-size: 20px">评论</div>-->
<!--      <div style="padding: 10px 0">-->
<!--        <el-input size="small" type="textarea" v-model="commentForm.content"></el-input>-->
<!--      </div>-->
<!--      <div class="pd-10" style="text-align: right">-->
<!--        <el-button type="primary" size="small" @click="save">评论</el-button>-->
<!--      </div>-->
<!--    </div>-->

    <!--      评论列表-->
    <div>
      <div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #ccc; padding: 10px 0; ">
        <div style="display: flex">
          <div style="width: 100px; text-align: center">
            <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
          </div> <!--  头像-->
          <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px">
            <b>{{ item.nickname }}：</b>
            <span>{{ item.content }}</span>

            <div style="display: flex; line-height: 20px; margin-top: 5px">
              <div style="width: 200px;">
                <i class="el-icon-time"></i><span style="margin-left: 5px">{{ item.time }}</span>
              </div>
              <div style="text-align: right; flex: 1">
                <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>
                <el-button type="text" style="color: red" @click="del(item.id)" v-if="user.id === item.userId">删除</el-button>
              </div>
            </div>
          </div>   <!--  内容-->
        </div>
        <div v-if="item.children.length"  style="padding-left: 200px;">
          <div v-for="subItem in item.children" :key="subItem.id"  style="background-color: #f0f0f0; padding: 5px 20px">
            <!--          回复列表-->
            <div style="font-size: 14px; padding: 5px 0; line-height: 25px">
              <div>
                <b style="color: #3a8ee6" v-if="subItem.pnickname">@{{ subItem.pnickname }}</b>
              </div>
              <div style="padding-left: 5px">
                <b>{{ subItem.nickname }}：</b>
                <span>{{ subItem.content }}</span>
              </div>
              <div style="display: flex; line-height: 20px; margin-top: 5px; padding-left: 5px">
                <div style="width: 200px;">
                  <i class="el-icon-time"></i><span style="margin-left: 5px">{{ subItem.time }}</span>
                </div>
                <div style="text-align: right; flex: 1">
                  <el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id)">回复</el-button>
                  <el-button type="text" style="color: red" @click="del(subItem.id)" v-if="user.id === subItem.userId">删除</el-button>
                </div>
              </div>
            </div>   <!--  内容-->
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="回复" :visible.sync="dialogFormVisible" width="50%">
      <el-form label-width="80px" size="small">
        <el-form-item label="回复内容">
          <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
export default {
  name: "Borrow",
  data(){
    return{
      bookId:this.$route.query.id,
      book:{},
      comments: [],
      dialogFormVisible: false,
      commentForm: {
        content: '',
        bookId: 0,
        contentReply:''
      },
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    this.load()
    this.getComments();
  },
  methods:{
    getComments() {   //获取评论
      this.request.get("/comment/"+ 0 +"/" + this.bookId).then(resp => {
        console.log('获取评论')
        console.log(resp)
        this.comments = resp.data
      })
    },
    save() {
      if (!this.user.id) {
        this.$message.warning("请登录后重试")
        return
      }
      this.commentForm.bookId = this.bookId
      if (this.commentForm.contentReply) {
        this.commentForm.content = this.commentForm.contentReply
      }
      this.request.post("/comment/save", this.commentForm).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.commentForm.content = ''
          this.$message.success("评论成功")
          this.getComments()
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    load(){
      this.request.get("/book/"+this.bookId).then(res=>{
           this.book = res.data
      })
    },
    cart(){
      if (!this.user.username){
        this.$message.warning("请先登录")
        return
      }
      this.request.post("/book/borrow/"+ this.bookId +"/"+ this.user.id).then(res=>{
        if (res.code===200){
          this.$message.success("借阅申请提交成功")
          this.load()
        }
      })
    },
    handleReply(pid) {
      this.commentForm = {pid: pid}
      this.dialogFormVisible = true
    },
    del(id) {
      this.request.delete("/comment/" + id).then(res => {
        if (res.code === 200) {
          this.getComments()
          this.$message.success("删除成功")
        } else {
          this.$message.error("删除失败")
        }
      })
    },
  }
}
</script>

<style scoped>
.item1{
  padding: 5px;
  color: #666;
}
</style>